<template>
	<view class="wodezuji">
		<view class="item">
			<view class="item-time">
				<view class="item-time-left" @click="handleshow">
					<text>{{time}}</text>
					<image src="../../static/lb_px@2x.png" mode=""></image>
				</view>
				<view class="qingkong" v-if="index == 0">
					清空
				</view>
			</view>
			<view class="shangpin">
				<view class="shangpin-view" v-for="(tab,index1) in list" :key="index1" @click="handlexiangqing(tab.goodsId)">
					<image class="shangpin-view-image" :src="tab.goodsImg" mode="aspectFill"></image>
					<image v-if="tab.inventory == 0" class="shangpin-view-image1" src="../../static/tx_sq@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="empty" v-if="showEmpty">
			<text>暂无足迹</text>
		</view>
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm" confirm-color="#333333"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				time:'',
				page:1,
				size:30,
				pageTotal:'',
				list:[],
				showEmpty:false,
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd')
			this.getUserFootprint()
		},
		methods: {
			//打开时间弹框
			handleshow(){
				this.show = true
			},
			//确定时间
			confirm(data){
				console.log(data)
				this.time = data.year + '-' + data.month + '-' + data.day
				this.page = 1
				this.list = []
				this.getUserFootprint()
			},
			//足迹
			async getUserFootprint(){
				const params = {
					page:this.page,
					size:this.size,
					dataTime:this.time
				}
				const res = await this.$u.api.getUserFootprint(params)
				this.list = [...this.list,...res.rows]
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			
			//商品详情
			handlexiangqing(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			},
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getUserFootprint()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.getUserFootprint()
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .wodezuji{
		
	}
	.item{
		
	}
	.item-time{
		padding: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.item-time-left{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-time-left image{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
	.qingkong{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 38rpx;
	}
	.shangpin{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 28rpx 6rpx 8rpx 6rpx;
		background: white;
	}
	.shangpin-view{
		width: 218rpx;
		height: 218rpx;
		margin: 0rpx 10rpx 20rpx 10rpx;
		position: relative;
	}
	.shangpin-view-image{
		width: 218rpx;
		height: 218rpx;
	}
	.shangpin-view-image1{
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 44rpx;
		left: 46rpx;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
</style>
